<template>
	<view class="content">
		<!-- 头部导航 -->
		<view class="energy_nav">
			<text :class="selectedNav == 1? 'isShowBill':''" >电能分析</text><!-- @click="btnNav(1)" -->
			<text :class="selectedNav == 2? 'isShowBill':''" @click="navWater">用水分析</text><!-- @click="btnNav(2)" -->
		</view>
		<!-- 下方分析列表 -->
		<view class="energy_list">
			<!-- 月度、日用 选择-->
			<view class="date_type">
				<text :class="selectDate == 1? 'is_show_date': ''" @click="changeDate(1)">月度用电</text>
				<text :class="selectDate == 2? 'is_show_date': ''" @click="changeDate(2)">日用电量</text>
			</view>
			<!-- 年份 -->
			<view class="year_list" v-if="selectDate==1">
				<block v-for="(item,index) in yearList" :key="index">
					<view :data-id="index" :class="yearChange == index? 'is_show_year' : ''" @click="changeYear($event)">{{item}}</view>
				</block>
			</view>
			<!-- 图表统计 -->
			<view class="energy_chart">
				<view class="qiun-bg-white qiun-title-bar">
					<view class="qiun-title-dot-light">电量(度)</view>
				</view>
				<view class="qiun-charts">
					<canvas :canvas-id="canvasColumn" :id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
				</view>
				<!-- 遮罩 图列的显示 -->
				<view class="qiun_layer"> 
				</view>
			</view>
			<!-- 环形图区域 -->
			<view class="donut_figure" v-if="selectDate==1">
				<view class="figure_one">
					<view class="ring">
						<!-- percent[0] -->
						<cmd-progress stroke-color="#94DC86" :stroke-width="16" type="circle" :percent="percent[0]" :width="70"></cmd-progress>
					</view>
					<text>一阶电价</text>
				</view>
				<view class="figure_one">
					<view class="ring">
						<cmd-progress stroke-color="#F6782A" :stroke-width="16" type="circle" :percent="percent[1]" :width="70"></cmd-progress>
					</view>
					<text>二阶电价</text>
				</view>
				<view class="figure_one">
					<view class="ring">
						<cmd-progress stroke-color="#FF2C2A" :stroke-width="16" type="circle" :percent="percent[2]" :width="70"></cmd-progress>
					</view>
					<text>三阶电价</text>
				</view>
			</view>

			<!-- 电阶简介 -->
			<view class="introduction">
				<text>阶梯式电价是阶梯式递增电价或阶梯式累进电价的简称，也称为阶梯电价，是指把户均用电量设置为若干个阶梯分段或分档次定价计算费用。对居民用电实行阶梯式递增电价可以提高能源效率。通过分段电量可以实现细分市场的差别定价，提高用电效率。</text>
			</view>
		</view>
		<!-- 表格数据 -->
		<view class="table_deta">
			<view class="table_tit" v-if="selectDate==1&&elcData.list.length>0">
				<text>月份</text>
				<text>电量（千瓦时）</text>
				<text>电费（元）</text>
			</view>
			<view class="table_tit" v-if="selectDate==2&&elcData.list.length>0">
				<text>时间</text>
				<text>电量（千瓦时）</text>
				<text>电费（元）</text>
			</view>
			<view class="table_con">
				<view class="con_item" v-for="(item,index) in elcData.list" v-if="selectDate==1">
					<text>{{item.month}}</text>
					<text>{{item.count}}</text>
					<text>{{item.cost}}</text>
				</view>
                <view class="con_item" v-for="(item,index) in elcData.list" v-if="selectDate==2">
                 	<text>{{item.day_str}}</text>
                 	<text>{{item.day_count}}</text>
                 	<text>{{item.day_cost}}</text>
                 </view>
			</view>
			<!-- 底部统计 -->
			<view class="table_foo"  v-if="selectDate==1">
				<text>年累计电量:{{elcData.total_count}}kw/h</text>
				<text>年累计电费:{{elcData.total_cost}}元</text>
			</view>
			<view class="table_foo"  v-if="selectDate==2">
				<text>周累计电量:{{elcData.total_count||0}}kw/h</text>
				<text>周累计电费:{{elcData.total_cost||0}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	let _self;
	let canvaColumn = null;
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				selectedNav: '1',
				selectDate: '1',
				yearChange: 0,
				// 年份列表
				yearList:'',
				// 状形图
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvasColumn: '1',
				"chartData": {
					"categories": ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], 
					// 状图配置
					"series": [{
						"name": "电量(度)",
						"data": [45, 37, 43, 224, 33, 22, 22],
						"color": '#94DC86',
						"textSize": '0', 
					}]
				},
				"chartDataDemo": {"xData":["1月","2月","3月","4月","5月","6月","7月","8月","9月"],
					"yData":[0,0,0,0,0,0,0,0,0],
					"max":0,"percent":[0,0,0],
					"total_count":0,
					"total_cost":0,
					"list":[
						{"month":"2020-01","count":0,"cost":"0.00"},
					    {"month":"2020-02","count":0,"cost":"0.00"},
						{"month":"2020-03","count":0,"cost":"0.00"},
						{"month":"2020-04","count":0,"cost":"0.00"},
						{"month":"2020-05","count":0,"cost":"0.00"},
						{"month":"2020-06","count":0,"cost":"0.00"},
						{"month":"2020-07","count":0,"cost":"0.00"},
						{"month":"2020-08","count":0,"cost":"0.00"},
						{"month":"2020-09","count":0,"cost":"0.00"}]},
				elc_code:'',
				water_code:'',
				elcData:{
					list:[]
				},
				percent:'',
				cate:'month'
			};
		},
		onLoad(){
			this.getTime()
			const userInfo = uni.getStorageSync('userInfo');
			this.elc_code=userInfo.elc_code;
			this.water_code=userInfo.water_code;
			this.energyAnalysis(this.yearList[0],this.cate);
		/* 	this.selectDate=2;
			this.energyAnalysis(this.yearList[0],'days') */
		},
		methods: {
			navWater(){
				uni.redirectTo({
				    url: 'energyAnaWater'
				});
			},
			energyAnalysis(year,cate){
				var that=this;
				that.ajax({
					url:'api/user/energyAnalysis',
					method:'post',
					data:{
						cate:cate,
						code:that.elc_code,
						year:year,
						type:1,
					},
					success:function(res){
						console.log(res)
						if(res.code!=200){
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
							that.showColumn(that.canvasColumn, that.chartDataDemo)
						return
						}
						that.elcData=res.data
						console.log(that.elcData)
						if(res.data.percent){
								that.percent=res.data.percent;
						}
						
						//console.log(that.elcData.list)
						that.showColumn(that.canvasColumn, that.elcData)
					}
				  }) 
			},
			btnNav(num) {
				this.selectedNav = num
			},
			changeDate(num) {
				this.selectDate = num;
				var cate=''
				if(num==1){
					cate='month'
				}else{
					cate='days'
				}
				console.log(this.yearList[0])
				var year=this.yearList[0]
				this.yearChange=0;
				this.energyAnalysis(year,cate);
			},
			changeYear(e) {
				this.yearChange = e.currentTarget.dataset.id;
				this.energyAnalysis(this.yearList[this.yearChange],this.cate);
			},
			// 初始化
			showColumn(canvasId, chartData) {
				var series= [{
						"name": "电量(度)",
						"data": chartData.yData,
						"color": '#94DC86',
						"textSize": '0', 
					}]
					//console.log(series)
				canvaColumn = new uCharts({
					$this: _self,
					// 页面组件canvas-id
					canvasId: canvasId,
					// 图表类型
					type: 'column',
					// 是否显示各类别的图例标识
					legend: {
						show: true,
					},
					// 字体大小
					fontSize: 12,
					// 背景颜色
					background: '#FFFFFF',
					// 像素比
					pixelRatio: _self.pixelRatio,
					// 是否动画展示
					animation: true,
					// 图表下方年份
					categories: chartData.xData,
					// 数据
					series:series,
					// X轴配置
					xAxis: {
						// 表格内竖线不展示
						disableGrid: true,
					},
					// Y轴配置
					yAxis: {
						// 表格内横线不展示
						disableGrid: true,
						min: 0,
						max: chartData.max,
						splitNumber: 4,
						format:val=>{
						return val.toFixed(2)
						}
						
					},
					// 是否在图表中显示数据标签内容值
					dataLabel: true,
					// canvas宽度
					width: _self.cWidth * _self.pixelRatio,
					// canvas高度
					height: _self.cHeight * _self.pixelRatio,
					// 图例
					extra: {
						column: {
							type: 'group',
							width: 16
						}
					}
				});

			},
			getTime:function(){
							 var date = new Date(),
							 year = date.getFullYear(),
							 month = date.getMonth() + 1,
							 day = date.getDate(),
							 hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
							 minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
							 second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
							 month >= 1 && month <= 9 ? (month = "0" + month) : "";
							 day >= 0 && day <= 9 ? (day = "0" + day) : "";
							 var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
							 console.log(year)
							// this.date=year + '.' + month
							var year2=year-1;
							var year3=year-2;
							var yearList=[];
							yearList.push(year,year2,year3)
							console.log(yearList)
							this.yearList=yearList
							 return timer;
			},
		},
		mounted() {
			_self = this;
			this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(440);
			//this.showColumn(this.canvasColumn, this.chartData)
		}

	}
</script>

<style lang="less" scoped>
	.content {
		color: #333;
	}

	.energy_nav {
		display: flex;
		justify-content: space-around;
		height: 110rpx;
		line-height: 110rpx;
		font-weight: 700;
		font-size: 34rpx;
		border-bottom: 4rpx solid #f3f3f5;
	}

	.energy_list {
		padding: 0 20rpx;
		overflow: hidden;

		.date_type {
			margin: 40rpx auto;
			width: 480rpx;
			display: flex;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 45rpx;
			font-size: 34rpx;
			font-weight: 700;
			background-color: #f3f3f5;

			text {
				flex: 1;
				border-radius: 45rpx 0 0 45rpx;
			}

			& text:nth-child(2) {
				border-radius: 0 45rpx 45rpx 0;
			}
		}

		// 年份
		.year_list {
			display: flex;
			justify-content: space-around;
			height: 150rpx;
			line-height: 150rpx;
		}
	}

	.energy_chart {
		position: relative;
		padding-left: 20rpx;
		font-size: 24rpx;
		.qiun_layer{
			position: absolute;
			left: 40%;
			bottom: 32rpx;
			width: 200rpx;
			height: 40rpx;
			background-color: #fff;
		}
	}

	// 环形图区域
	.donut_figure {
		display: flex; 
		font-size: 36rpx;
		background-color: #fff !important;

		.figure_one {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 0 36rpx;
			width: 33.33%;
			height: 220rpx;
			text-align: center;
			background-color: #fff;

			// 圆形
			.ring {
				margin: 0 auto;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background-color: #fff;
			}
		}
	}

	// 电阶简介
	.introduction {
		margin: 40rpx 0;
		padding: 44rpx 30rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		border-radius: 15rpx;
		background-color: #F3F3F5;
	}

	// 表格数据
	.table_deta {
		// height: 482rpx;

		.table_tit {
			padding: 0 20rpx;
			display: flex;
			font-size: 26rpx;
			height: 100rpx;
			color: #666;
			line-height: 100rpx;
			background-color: #F7F9FB;

			text {
				width: 33.33%;
				text-align: center;
			}
		}

		.table_con {
			padding: 0 40rpx;
			font-size: 30rpx;

			.con_item {
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 2rpx solid #f5f5f5;

				text {
					width: 33.333%;
					text-align: center;
				}

				& text:nth-child(2) {
					position: relative;

					image {
						position: absolute;
						top: 36rpx;
						width: 78rpx;
						height: 34rpx;
					}
				}
			}
		}

		.table_foo {
			display: flex;
			justify-content: space-around;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #000;
		}
	}

	// 状图
	.charts {
		width: 750rpx;
		height: 400rpx;
		background-color: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10rpx 2%;
		flex-wrap: nowrap;
	}

	// 标题
	.qiun-title-dot-light {
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #666
	}

	.qiun-charts { 
		margin-top: 40rpx;
		width: 750rpx;
		height: 440rpx;
		background-color: #FFFFFF;
	}
	 
</style>
